<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Document</title>
</head>
<body>
    <div id="content" style="height:150px;line-height:150px;text-align:center; color: #fff;background-color:#ccc;font-size:80px;"></div>
    <script>
        let num = 1;
        let content = document.getElementById('content');
        function count() {
            console.log('this-->', this)
            content.innerHTML = num++;
        };
        // // 第一版
        // function throttle( func , wait) {
        //     let previous = 0;
        //     return function () {
        //         var context = this
        //         var args = arguments
        //         let now = Date.now()
        //         if(now-previous > wait) {
        //             func.apply(context, args)
        //             previous = now ;
        //         }
        //     }
        // }

        function throttle (func, wait){
            let previous =0;
            return function() {
                var context=this;
                var args=arguments;
                let now = Date.now();
                if(now-previous> wait){
                    func.apply(context, args);
                    previous =now;
                }
            }
        }




        content.onmousemove = throttle(count, 500);
    </script>
</body>
</html>